<!DOCTYPE html>
<html lang="en" class="no-js" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorator="layout">
<head>
<title>专题管理</title>
</head>
<body>
<div layout:fragment="content">
	<div class="row">
		<div class="col-md-12">
			<div class="btn-group pull-right">
				<a href="index.html" th:href="@{/promotion/topic/index/}" id="link_return" class="btn green">返回<i class="fa fa-arrow-circle-o-left"></i></a>
			</div>
		</div>
	</div>
    <div class="row">&nbsp;</div>
	<!-- BEGIN CONTAINER -->
    <div class="portlet box blue" id="form_wizard_1">
        <div class="portlet-title">
            <div class="caption">
                <i class="fa fa-gift"></i> 专题添加- <span class="step-title">
                第四步</span>
            </div>

        </div>
        <div class="portlet-body form">
            <form th:action="@{/promotion/topic/updateGoods}" th:object="${topic}" class="form-horizontal" id="form_topic_edit" method="POST">
                <input type="hidden" id="hidden_id" th:field="*{id}" />
                <input type="hidden" id="hidden_step" name="step" />
                <div class="form-wizard">
                    <div class="form-body">
                        <ul id="category" class="nav nav-pills nav-justified steps">
                            <li>
                                <a href="#tab1" data-toggle="tab" class="step">
                                <span class="number">
                                1 </span>
                                <span class="desc">
                                <i class="fa fa-check"></i>通用信息</span>
                                </a>
                            </li>
                            <li>
                                <a href="#tab2" data-toggle="tab" class="step">
                                <span class="number">
                                2 </span>
                                <span class="desc">
                                <i class="fa fa-check"></i>内容</span>
                                </a>
                            </li>
                            <li>
                                <a href="#tab3" data-toggle="tab" class="step active">
                                <span class="number">
                                3 </span>
                                <span class="desc">
                                <i class="fa fa-check"></i>专题模块</span>
                                </a>
                            </li>
                            <li class="active">
                                <a href="#tab4" data-toggle="tab" class="step">
                                <span class="number">
                                4 </span>
                                <span class="desc">
                                <i class="fa fa-check"></i>设置商品</span>
                                </a>
                            </li>
                        </ul>
                        <div id="bar" class="progress progress-striped" role="progressbar">
                            <div class="progress-bar progress-bar-success" style="width: 100%;">
                            </div>
                        </div>
                        <div class="tab-content">
                            <!--商品设置-->
                            <div class="tab-pane" id="tab4">
                                 <div class="row">
                                    <div class="form-group">
                                        <label class="control-label col-md-4">当前模块</label>
                                        <div class="col-md-4">
                                           <select id="select_topicCategory" class="form-control" placeholder="选择模块" >
                                               <option value="0">请选择模块</option>
                                               <option th:each="topicModule : ${topic.topicModuleList}" th:value="${topicModule.id}" th:text="${topicModule.name}"></option>
                                           </select>
                                        </div>
                                     </div>
                                </div>
                                <h4 class="form-section text-center">添加商品信息</h4>
                                <div class="row">
                                    <div class="col-md-3"></div>
                                    <div class="col-md-2">
                                        <select id="goodsCategoryId" th:remove="none" class="form-control">
                                            <option value="">所有分类</option>
                                            <option th:each="category : ${categoryList}" th:value="${category.id}" th:text="${category.name}"></option>
                                        </select>
                                    </div>
                                    <div class="col-md-2">
                                        <select id="goodsBrandsId" th:remove="none" class="form-control">
                                            <option value="">所有品牌</option>
                                            <option th:each="brand : ${brandList}" th:value="${brand.id}" th:text="${brand.name}"></option>
                                        </select>
                                    </div>
                                    <div class="col-md-2">
                                        <input type="text" placeholder="商品名称"  id="goodsName" class="form-control" />
                                    </div>
                                    <div class="col-md-2">
                                        <button type="button" id="btn_search" class="btn green">
                                            <i class="fa  fa-search"><span>搜索</span></i>
                                        </button>
                                        </div>
                                    </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form">
                                            <div class="form-horizontal"></div>
                                            <!--<form role="form" id="form_goodsMatch" name="form_goodsMatch" class="form-horizontal">-->
                                                <div class="form-body">
                                                    <div class="form-group">
                                                        <div class="row text-center">
                                                            <div class="col-md-5">
                                                                <div class="text-center">
                                                                    <label class="btn btn-block green">可选商品</label>
                                                                </div>
                                                                <div>
                                                                    <select class="form-control" multiple="multiple"  size="10"  id="select_matchableList">
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-2">
                                                                <div class="text-center">
                                                                    <label class="btn btn-block green">操作</label>
                                                                </div>
                                                                <label></label>
                                                                <div class="btn-group-vertical">
                                                                    <button type="button" class="btn btn-xs purple " id="btn_allToRight" style="margin-top: 5px;">&nbsp;&nbsp;<i class="fa fa-angle-double-right"></i>&nbsp;&nbsp;</button>
                                                                    <button type="button" class="btn btn-xs purple " id="btn_moveToRight" style="margin-top: 5px;"><i class="fa fa-angle-right"></i></button>
                                                                    <button type="button" class="btn btn-xs purple " id="btn_moveToLeft" style="margin-top: 5px;"><i class="fa fa-angle-left"></i></button>
                                                                    <button type="button" class="btn btn-xs purple " id="btn_allToLeft" style="margin-top: 5px;"><i class="fa fa-angle-double-left"></i></button>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-5">
                                                                <div class="text-center">
                                                                    <label class="btn btn-block green">已选择的商品</label>
                                                                </div>
                                                                <div id="goodsIdArea">
                                                                   <select  class="form-control" multiple="multiple" size="10" id="select_matchedList">
                                                                   </select>
                                                                   <select style="display: none;" multiple="multiple" th:each="topicModule:${topic.topicModuleList}" th:name="|topicModuleList[${topicModuleStat.index}].goodsIdList|" class="form-control" size="10">
                                                                       <option th:each="goods : ${topicModule.goodsList}" th:value="${goods.id}" th:text="${goods.name}"></option>
                                                                   </select>
                                                                </div>

                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            <!--</form>-->

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-actions fluid">
                        <div class="row">
                            <div class="col-md-12">
                                <div id="button_group" class="col-md-offset-3 col-md-9">
                                    <a id="btn_prev" href="javascript:;" class="btn green button-previous">
                                    <i class="m-icon-swapleft"></i>上一步</a>
                                    <a id="btn_next" href="javascript:;" class="btn blue button-submit">
                                    提交<i class="m-icon-swapright m-icon-white"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>

<script th:inline="javascript">
    /*<![CDATA[*/
    $(document).ready(function(){
        $("#tab4").show();

        $("#category li a").each(function () {

            $(this).bind("click", function () {
                var step = $(this).children(".number").text().trim();
                $("#hidden_step").val(step);
                generateForm();
                document.forms[0].submit();
            });

        });

        function generateForm(){
            $("#goodsIdArea select option").each(function(){
                this.selected = true;
            });
        }

        $("#btn_next").bind("click",function(){
            $("#hidden_step").val("5");
            generateForm();
            document.forms[0].submit();
        });
        $("#btn_prev").bind("click",function(){
            $("#hidden_step").val("3");
            generateForm();
            document.forms[0].submit();
        });

        function selectHide(){
            $("#goodsIdArea select").each(function(){
                $(this).hide();
            });
        }
        $("#select_topicCategory").bind("change",function(){
            selectHide();
            var $indexOption = $("#select_topicCategory option:selected");
            var index = $indexOption.index();
            $("#goodsIdArea select:eq("+index+")").show();
            $("#select_matchableList").empty();
        });
        //ajax查询商品
        $("#btn_search").bind("click",function(){

            var _goodsCategoryId = $("#goodsCategoryId option:selected").val();
            var _goodsBrandsId = $("#goodsBrandsId option:selected").val();
            var _goodsName = $("#goodsName").val().trim();
             $.ajax({
                url:'/promotion/topic/goodsSearch',
                data:{goodsCategoryId:_goodsCategoryId,goodsBrandsId:_goodsBrandsId,goodsName:_goodsName},
                type:'post',
                dataType:'json',
                success:function(data){
                    $('#select_matchableList').empty();
                    if(data.length){
                        for(var i =0 ;i<data.length;i++){
                            $('#select_matchableList').append('<option value="'+data[i].id+'">'+data[i].name+'</option>');
                        }
                    }
                },
                error:function(XMLHttpRequest, textStatus, errorThrown){

                }
            });
        });

        function checkModules() {
            if($("#select_topicCategory").val() == 0) {
                bootbox.alert("请选择模块!!");
                return false;
            }else {
                return true;
            }
        }

        function checkGoods(viewIndex) {

        }
        //添加 双击事件
        $("#goodsIdArea select option").live("dblclick",function(){
             if (checkModules()) {
                var viewIndex = getViewSelect();
                if($("#goodsIdArea select:eq(" + viewIndex + ") option:selected").size() > 0){
                    var $remove = $("#goodsIdArea select:eq(" + viewIndex + ") option:selected").remove().attr("selected", "");
                    $("#select_matchableList").append($remove.removeAttr("selected"));
                }else {
                    bootbox.alert("请选择要删除的商品");
                }

            }
        });

        $("#select_matchableList option").live("dblclick",function(){
             if (checkModules()) {
                var flag = true;
                var viewIndex = getViewSelect();
                $("#select_matchableList option:selected").each(function(){
                    var leftVal = $(this).val();
                    $("#goodsIdArea select:eq(" + viewIndex + ") option").each(function(){
                        var rightVal = $(this).val();
                        if(leftVal == rightVal) {
                            flag = false;
                        }
                    });
                });
                if(flag) {
                    if($("#select_matchableList option:selected").size()>0) {
                        var $remove = $("#select_matchableList option:selected").remove().attr("selected", "");
                        $("#goodsIdArea select:eq(" + viewIndex + ")").append($remove.removeAttr("selected"));
                    }else {
                        bootbox.alert("请选择要添加的商品");
                    }

                }else {
                    bootbox.alert("不能重复添加商品!");
                }
            }
        });

        $("#btn_allToRight").bind("click", function () {
            if (checkModules()) {
                var flag = true;
                var viewIndex = getViewSelect();
                $("#select_matchableList option").each(function(){
                    var leftVal = $(this).val();
                    $("#goodsIdArea select:eq(" + viewIndex + ") option").each(function(){
                        var rightVal = $(this).val();
                        if(leftVal == rightVal) {
                            flag = false;
                        }
                    });
                });
                if(flag) {
                    if($("#select_matchableList option").size() > 0) {
                        var $remove = $("#select_matchableList option").remove();
                        $("#goodsIdArea select:eq(" + viewIndex + ")").append($remove);
                    }else {
                        bootbox.alert("请选择要添加的商品");
                    }

                }else {
                    bootbox.alert("不能重复添加商品!");
                }

            }

        });

        $("#btn_moveToRight").bind("click", function () {
            if (checkModules()) {
                var flag = true;
                var viewIndex = getViewSelect();
                $("#select_matchableList option:selected").each(function(){
                    var leftVal = $(this).val();
                    $("#goodsIdArea select:eq(" + viewIndex + ") option").each(function(){
                        var rightVal = $(this).val();
                        if(leftVal == rightVal) {
                            flag = false;
                        }
                    });
                });
                if(flag) {
                    if($("#select_matchableList option:selected").size()>0) {
                        var $remove = $("#select_matchableList option:selected").remove().attr("selected", "");
                        $("#goodsIdArea select:eq(" + viewIndex + ")").append($remove);
                    }else {
                        bootbox.alert("请选择要添加的商品");
                    }

                }else {
                    bootbox.alert("不能重复添加商品!");
                }
            }
        });

        $("#btn_moveToLeft").bind("click", function () {
            if (checkModules()) {
                var viewIndex = getViewSelect();
                if($("#goodsIdArea select:eq(" + viewIndex + ") option:selected").size() > 0){
                    var $remove = $("#goodsIdArea select:eq(" + viewIndex + ") option:selected").remove().attr("selected", "");
                    $("#select_matchableList").append($remove);
                }else {
                    bootbox.alert("请选择要删除的商品");
                }

            }
        });

        $("#btn_allToLeft").bind("click", function () {
            if (checkModules()) {
                var viewIndex = getViewSelect();
                if($("#goodsIdArea select:eq(" + viewIndex + ") option").size() > 0) {
                    var $remove = $("#goodsIdArea select:eq(" + viewIndex + ") option").remove();
                    $("#select_matchableList").append($remove);
                }else {
                    bootbox.alert("请选择要删除的商品");
                }

            }
        });
        function getViewSelect() {
            return $("#select_topicCategory option:selected").index();
        }
    });


    /*]]>*/
</script>